<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排他</title>
    <style>
       input {
           width: 50px;
           height: 50px;
       }
    </style>
</head>
<body>
    <div class="box">
        <input type="checkbox" name="" id="">
    </div>
    <div class="box2">
        <input type="checkbox" name="" id="">
        <input type="checkbox" name="" id="">
        <input type="checkbox" name="" id="">
        <input type="checkbox" name="" id="">
    </div>

    <script>
        var input1 = document.querySelector('.box input');
        var inputs = document.querySelectorAll('.box2 input');
        // console.log(inputs);

        // 1.先点input1 全选线面的inputs
        input1.onclick = function (){
            for (var i = 0; i < inputs.length; i++){
                // console.log(this.checked);
                inputs[i].checked = this.checked;
            }
        }
        // 2.全选inputs 触发input
        for (var j = 0; j < inputs.length; j++){
            inputs[j].onclick = function(){
                var flag = true;
                
                //这个循环是看检查每个input 选中没有
                for (var k = 0; k < inputs.length; k ++){
                    if(inputs[k].checked == false){
                    flag = false;
                    // break;
                }
                input1.checked = flag;
                }
            }
        }
    </script>
</body>
</html>